<template>
    <div class="box">
        <header>
            <van-nav-bar title="图文咨询" left-arrow @click-left="onClickLeft" />
            <van-notice-bar text="急重症患者不适合网上诊疗/咨询，请前往医院就诊. 急重症患者不适合网上诊疗/咨询，请前往医院就诊." />
        </header>

        <main>
            <div class="center">
                <div class="left"><img src="https://img0.baidu.com/it/u=2050733188,2909000113&fm=253&fmt=auto&app=120&f=JPEG?w=427&h=599" alt=""></div>
                <div class="right">
                    <div style="display: flex;">
                        <h3>范娟</h3> <span style="margin-left: 20px;">主治医师</span>
                    </div>
                    <p style="color: #ccc;">枣庄市中医医院(北京中医药大学枣庄医院)</p>
                </div>
            </div>

            <div class="bin">
                <p>
                <h3>请填写病情描述</h3>
                <span @click="enter"><van-icon name="upgrade" />导入历史病情</span>
                </p>
            </div>

            <div class="kill">
                <p>
                    <textarea class="auto-resize" v-model="text"
                        placeholder="   请详细描述咨询人当前的病情状况、最近医院就医用药情况以及需要医生解答的问题，如有检查资料请确保清晰可见后上传，以便医师能更全面了解病况并提供专业的指导意见，问题提交后无法修改或补充信息"></textarea>
                </p>
            </div>

            <div class="up">
                <p>
                <h3>请上传检查报告或患处照片</h3>
                <span @click="nater"><van-icon name="upgrade" />导入历史图片</span>
                </p>
                <p>照片仅自己和医生可见(最多9张){{ }}</p>
            </div>


            <div class="ups">
                <van-uploader v-model="fileList" multiple :max-count="9" preview-size="346px" @click="handleClick" />
                <h3 v-if="count == 9">{{ feedback }}</h3>
            </div>

            <div>
                <button :disabled="text.length < 5" @click="submit" class="btn">下一步</button>
            </div>

            <div class="top" v-show="isTop" @click="isTop = false">
                暂无历史病情
            </div>
            <div class="bottom" v-show="isBottom" @click="isBottom = false">
                暂无历史图片
            </div>
        </main>






    </div>
</template>

<script setup lang="ts">
import router from '@/router';
import { onMounted, ref, watch } from 'vue';
const onClickLeft = () => {
    window.history.go(-1);
}

const fileList = ref([]);
const myData = ref(0); // 要监听的数据
const count = ref(0);   // 计数器
const feedback = ref(''); // 用来存储反馈信息
const isTop = ref(false);
const isBottom = ref(false);
const text = ref('');

const enter = () => {
    isTop.value = true;
};
// onMounted(() => {
//     setTimeout(() => {
//         isTop.value = false;
//     }, 1000)
// })

const nater = () => {
    isBottom.value = true;
};

const submit = () => {
    router.push('/pictrue')
}

const handleClick = () => {
    console.log('1')

    myData.value = myData.value + 1; // 每次点击按钮，数据变化
}

watch(myData, (newValue, oldValue) => {
    // 每次 myData 改变时，计数器 +1
    count.value++;

    // 当计数达到 9 时，给出反馈
    if (count.value >= 9) {
        feedback.value = '已达图片上传上限，请删除部分图片后重新上传';
    }
    else {
        feedback.value = '';
    }
    return
});

</script>



<style scoped lang="scss">
.box {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;

    header {
        height: 200px;
        // background-color: pink;
    }

    main {
        flex: 1;
        height: 100%;
        overflow-y: scroll;

        .center {
            width: 90%;
            height: 200px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            // background-color: pink;

            .left {
                img {
                    width: 100px;
                    height: 100px;
                    border-radius: 50%;
                    margin: 20px 30px;
                }
            }

            .right {
                margin: 30px 0px;
                display: flex;
                line-height: 50px;
                flex-direction: column
            }
        }

        .bin,
        .up {
            margin: 0 auto;
            width: 90%;
            height: 100px;

            // background-color: gray;
            span {
                color: #2775FF;
            }

            p {
                display: flex;
                justify-content: space-between;
            }
        }

        .up {
            margin-top: 30px;

            p {
                margin: 15px 0;
            }
        }

        .ups {
            width: 90%;
            margin: 0 auto;
            // background-color: pink;
        }

        .kill {
            width: 90%;
            margin: 0 auto;
            height: 400px;
            // background-color: pink;

            .auto-resize {
                width: 100%;
                height: 400px;
                resize: vertical;
                overflow: auto;
                font-size: 22px;
                border-radius: 25px;
                background-color: #F7F8F9;
                padding: 20px;
                /* 调整文本框内的内边距 */
            }

            .auto-resize::placeholder {
                margin-left: 10px;
                line-height: 2;
                /* 设置行高，调整行间距 */
            }
        }

        .btn {
            width: 90%;
            height: 80px;
            background-color: #1e6fff;
            margin-left: 37px;
            border: none;
            border-radius: 20px;
            font-size: 24px;
            color: #fff;
            top: 100%;
            z-index: 9;
            position: absolute;
        }

        .btn:disabled {
            background-color: #B4CCF8;
        }

        .top {
            width: 30%;
            height: 60px;
            line-height: 60px;
            margin: 0 auto;
            position: absolute;
            background-color: #000;
            color: #fff;
            top: 26%;
            left: 37%;
            text-align: center;
            border-radius: 10px;
            opacity: 0.6;
        }

        .bottom {
            width: 30%;
            height: 60px;
            line-height: 60px;
            margin: 0 auto;
            position: absolute;
            background-color: #000;
            color: #fff;
            top: 26%;
            left: 37%;
            text-align: center;
            border-radius: 10px;
            opacity: 0.6;
        }

    }

}
</style>
